<template>
  <!-- :keyboard-config="{isArrow: true, isDel: false, isEnter: true, isTab: true, isEdit: true}" -->
  <!-- :custom-config="{storage: true, checkMethod: checkColumnMethod}" -->
  <!-- :span-method="arraySpanMethod" -->
  <!-- :footer-method="footerMethod" -->
  <div div class="flex_column" style="height: 100%">
    <div class="flex_grow">
      <vxe-table
        ref="vxeTable"
        border
        highlight-current-row
        highlight-hover-row
        id="vxeTable_1"
        :height="height"
        size="mini"
        show-overflow
        :loading="tableLoading"
        :cell-class-name="tableCellClassName"
        :row-class-name="tableRowClassName"
        :checkbox-config="{
          checkMethod: checCheckboxkMethod,
          highlight: true,
          checkField: 'isChecked',
        }"
        :resizable-config="{
          minWidth: '16',
        }"
        :scroll-x="{
          enabled: scrollEnable,
        }"
        :scroll-y="{
          enabled: scrollEnable,
        }"
        :tree-config="treeConfig"
        :custom-config="{ storage: true, checkMethod: checkColumnCustomMethod }"
        :cell-style="cellStyle"
        auto-resize
        resizable
        :print-config="{}"
        :show-footer="showFooter"
        :footer-method="footerMethod"
        @checkbox-change="handleSelectionChange"
        @checkbox-all="handleSelectionChange"
        @cell-click="handleRowClick"
        @cell-dblclick="handleRowdbClick"
        @sort-change="sortChange"
        @custom="toolbarCustomEvent"
        :keep-source="keepSource"
        :span-method="rowspanMethod"
      >
        <vxe-column
          type="checkbox"
          fixed="left"
          width="45"
          style="height: 27.42px"
          v-if="hasSelect"
        ></vxe-column>
        type="seq"
        <vxe-column min-width="60" v-if="IsIndex" title="序号"></vxe-column>
        <vxe-column
          v-for="(x, z) in tableHeaderChange"
          :key="z + x['prop']"
          :resizable="true"
          :tree-node="x.treeNode ? x.treeNode : false"
          :sortable="x.sortable == 'custom' ? true : false"
          :field="x.prop"
          :visible="x.visible"
          :title="x.label"
          :min-width="x.width"
          :fixed="x.fix"
          :filters="EnableColumnFiltering ? [{ data: '' }] : null"
          :filter-method="filterMethod"
          :filter-recover-method="filterRecoverMethod"
          :align="x.align"
        >
          <template #filter="{ $panel, column }">
            <template v-for="(option, index) in column.filters">
              <input
                class="my-input"
                type="type"
                :key="index"
                v-model="option.data"
                @input="$panel.changeOption($event, !!option.data, option)"
                @keyup.enter="$panel.confirmFilter()"
                placeholder="按回车确认筛选"
                style="margin: 10px; height: 35px"
              />
            </template>
          </template>
          <template v-if="x.children">
            <vxe-column
              v-for="(i, k) in x.children"
              :field="i.prop"
              :title="i.label"
              :align="i.align"
              :tree-node="i.treeNode ? i.treeNode : false"
              :key="k"
              :width="i.width"
              :fixed="i.fix"
              :filters="EnableColumnFiltering ? [{ data: '' }] : null"
              :filter-method="filterMethod"
              :filter-recover-method="filterRecoverMethod"
            >
              <template #filter="{ $panel, column }">
                <template v-for="(option, index) in column.filters">
                  <input
                    class="my-input"
                    type="type"
                    :key="index"
                    v-model="option.data"
                    @input="$panel.changeOption($event, !!option.data, option)"
                    @keyup.enter="$panel.confirmFilter()"
                    placeholder="按回车确认筛选"
                    style="margin: 10px; height: 35px"
                  />
                </template>
              </template>
              <template slot-scope="scope">
                <span v-if="i.active">
                  <span v-for="(x2, index2) in i.active" :key="index2">
                    <span
                      v-show="x2.condition ? x2.condition(scope.row) : true"
                      size="mini"
                      :style="{
                        margin: '0 5px',
                        color: x2.color,
                        cursor: 'pointer',
                      }"
                      @click.stop="
                        operation(
                          x2.methods,
                          scope.row,
                          scope.row[i.prop],
                          i.prop,
                          scope.$rowIndex,
                        )
                      "
                      >{{ x2.name }}</span
                    >
                  </span>
                </span>
                <span v-else-if="i.button">
                  <el-button
                    v-show="o.condition ? o.condition(scope.row) : true"
                    v-for="(o, key) in i.button"
                    :key="key"
                    plain
                    @click.stop="
                      operation(
                        o.methods,
                        scope.row,
                        scope.row[i.prop],
                        i.prop,
                        scope.$rowIndex,
                      )
                    "
                    :type="o.type"
                    :circle="o.circle"
                    :icon="o.icon"
                    size="mini"
                  >
                    <template v-show="o.name">
                      {{ o.name }}
                    </template>
                  </el-button>
                </span>
                <span v-else-if="i.render && !i.component">{{
                  i.render(scope.row)
                }}</span>
                <span v-else-if="i.routerName">
                  <a
                    :style="{
                      color: theme,
                      'text-decoration': 'underline',
                      cursor: 'pointer',
                    }"
                    @click="handleActive(scope.row, i.routerName, i.prop)"
                  >
                    <span v-if="!i.format" v-html="scope.row[i.prop]"></span>
                    <span v-else>{{
                      i.format(scope.row[i.prop], scope.row)
                    }}</span>
                  </a>
                </span>
                <span v-else-if="i.component">
                  <span v-if="scope.row['update']">
                    <span
                      v-if="
                        i.component.type == 'input' && i.component.inputChange
                      "
                    >
                      <el-input
                        v-model="scope.row[i.prop]"
                        :type="i.component.inputType || 'text'"
                        size="mini"
                        :rows="1"
                        @change="
                          operation(
                            i.component.inputChange,
                            scope.row,
                            scope.row[i.prop],
                            i.prop,
                            scope.$rowIndex,
                          )
                        "
                      >
                      </el-input>
                    </span>
                    <span v-else-if="i.component.inputType == 'number'">
                      <el-input
                        v-model="scope.row[i.prop]"
                        @input="
                          operation(
                            i.component.methods,
                            scope.row,
                            scope.row[i.prop],
                            i.prop,
                            scope.$rowIndex,
                          )
                        "
                        @keyup.enter.native="
                          operation2(
                            x.component.methods2,
                            scope.row,
                            scope.row[x.prop],
                            x.prop,
                            scope.$rowIndex,
                          )
                        "
                        type="number"
                        size="mini"
                      ></el-input>
                    </span>
                    <span
                      v-else-if="
                        i.component.type == 'input' &&
                        i.component.inputType != 'number'
                      "
                    >
                      <el-input
                        v-model="scope.row[i.prop]"
                        :type="i.component.inputType || 'text'"
                        size="mini"
                        :rows="1"
                        @input="
                          operation(
                            i.component.methods,
                            scope.row,
                            scope.row[i.prop],
                            i.prop,
                            scope.$rowIndex,
                          )
                        "
                      ></el-input>
                    </span>
                    <span
                      v-else-if="
                        i.component.type == 'select' && i.component.selectChange
                      "
                    >
                      <el-select
                        filterable
                        clearable
                        :multiple="i.component.multiple"
                        value-key="label"
                        :disabled="i.component.disabled"
                        v-model="scope.row[i.prop]"
                        size="mini"
                        @change="
                          operation(
                            i.component.methods,
                            scope.row,
                            scope.row[i.prop],
                            i.prop,
                            scope.$rowIndex,
                          )
                        "
                      >
                        <el-option
                          v-for="x2 in scope.row[i.component.prop]"
                          :key="x2.value"
                          :label="x2.label"
                          :value="x2.value"
                        ></el-option>
                      </el-select>
                    </span>
                    <span v-else-if="i.component.type == 'select'">
                      <el-select
                        filterable
                        clearable
                        :multiple="i.component.multiple"
                        v-model="scope.row[i.prop]"
                        size="mini"
                        :disabled="i.component.disabled"
                        placeholder
                      >
                        <el-option
                          v-for="x2 in scope.row[i.component.prop]"
                          :key="x2.value"
                          :label="x2.label"
                          :value="x2.value"
                        ></el-option>
                      </el-select>
                    </span>
                    <span v-else-if="i.component.type == 'date'">
                      <el-date-picker
                        size="mini"
                        @change="
                          operation(
                            i.component.methods,
                            scope.row,
                            scope.row[i.prop],
                            i.prop,
                            scope.$rowIndex,
                          )
                        "
                        v-model="scope.row[i.prop]"
                        type="date"
                        editable
                        clearable
                        placeholder="选择日期"
                        :picker-options="getPickerTime(scope.row)"
                        value-format="yyyy-MM-dd"
                        style="width: 100%"
                      ></el-date-picker>
                    </span>
                    <span v-else-if="i.component.type == 'datetime'">
                      <el-date-picker
                        size="mini"
                        @change="
                          operation(
                            i.component.methods,
                            scope.row,
                            scope.row[i.prop],
                            i.prop,
                            scope.$rowIndex,
                          )
                        "
                        v-model="scope.row[i.prop]"
                        type="datetime"
                        editable
                        clearable
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss"
                        style="width: 100%"
                      ></el-date-picker>
                    </span>
                    <span v-else-if="i.component.type == 'time'">
                      <el-time-select
                        size="mini"
                        style="width: 100%"
                        v-model="scope.row[i.prop]"
                        :picker-options="{
                          start: '00:00',
                          step: '00:15',
                          end: '24:00',
                        }"
                        :placeholder="i.placeholder"
                      >
                      </el-time-select>
                    </span>
                    <span v-else-if="i.component.type == 'checkbox'">
                      <el-checkbox
                        v-model="scope.row[i.prop]"
                        @change="
                          operation(
                            i.component.methods,
                            scope.row,
                            scope.row[i.prop],
                            i.prop,
                            scope.$rowIndex,
                          )
                        "
                      ></el-checkbox>
                    </span>
                    <span v-else-if="i.component.type == 'switch'">
                      <el-switch
                        v-model="scope.row[i.prop]"
                        :active-color="i.component.activeColor"
                        :inactive-color="i.component.inactiveColor"
                        :active-value="i.component.activeValue"
                        :inactive-value="i.component.inactiveValue"
                      ></el-switch>
                    </span>
                    <span v-else-if="i.component.type == 'autocomplete'">
                      <el-autocomplete
                        size="mini"
                        v-model="scope.row[i.prop]"
                        :fetch-suggestions="
                          (queryString, cb) => {
                            fetchsuggertions(
                              queryString,
                              cb,
                              i.component.methods,
                            );
                          }
                        "
                        @select="
                          (item) => getRemote(row, item, i.component.methods)
                        "
                      >
                        <template slot-scope="{ item }">
                          <div style="border-bottom: 1px dashed #8c8e8e">
                            <el-form label-width="100px" inline>
                              <el-form-item
                                style="margin-bottom: 5px"
                                :label="i.component.label"
                                ><span style="color: orange">{{
                                  item[i.component.prop]
                                }}</span>
                              </el-form-item>
                              <el-form-item
                                style="margin-bottom: 5px"
                                :label="i.component.label2"
                                ><span style="color: orange">{{
                                  item[i.component.prop2]
                                }}</span>
                              </el-form-item>
                            </el-form>
                          </div>
                        </template>
                      </el-autocomplete>
                    </span>
                    <span v-else-if="i.component.type == 'tag'">
                      <el-tag
                        class="table_tag"
                        @click.stop.native="i.component.handleClick(scope.row)"
                      >
                        {{ scope.row[i.prop] }}</el-tag
                      >
                    </span>
                    <span
                      class="flex"
                      v-else-if="i.component.type == 'ColorPicker'"
                    >
                      <el-color-picker
                        size="mini"
                        v-model="scope.row[i.prop]"
                      ></el-color-picker>
                    </span>
                    <span v-else>{{ scope.row[i.prop] }}</span>
                  </span>
                  <span v-else>{{ scope.row[i.prop] }}</span>
                </span>
                <span v-else-if="i.format">{{
                  i.format(scope.row[i.prop], scope.row)
                }}</span>
                <span
                  v-else
                  v-html="scope.row[i.propName ? i.propName : i.prop]"
                ></span>
              </template>
            </vxe-column>
            <vxe-column
              v-if="isEditDel"
              label="操作"
              prop=""
              fixed="right"
              width="85px"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  @click="editRow(scope.row, scope.$rowIndex)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="delRow(scope.row, scope.$rowIndex)"
                ></el-button>
              </template>
            </vxe-column>
          </template>
          <template slot-scope="scope">
            <span v-if="x.active">
              <span v-for="(x2, index2) in x.active" :key="index2">
                <span
                  v-show="x2.condition ? x2.condition(scope.row) : true"
                  size="mini"
                  :style="{
                    margin: '0 5px',
                    color: x2.color,
                    cursor: 'pointer',
                  }"
                  @click.stop="
                    operation(
                      x2.methods,
                      scope.row,
                      scope.row[x.prop],
                      x.prop,
                      scope.$rowIndex,
                    )
                  "
                  >{{ x2.name }}</span
                >
              </span>
            </span>
            <span v-else-if="x.button">
              <el-button
                v-show="o.condition ? o.condition(scope.row) : true"
                v-for="(o, key) in x.button"
                :key="key"
                plain
                @click.stop="
                  operation(
                    o.methods,
                    scope.row,
                    scope.row[x.prop],
                    x.prop,
                    scope.$rowIndex,
                  )
                "
                :type="o.type"
                :circle="o.circle"
                :icon="o.icon"
                size="mini"
              >
                <template v-show="o.name">
                  {{ o.name }}
                </template>
              </el-button>
            </span>
            <span v-else-if="x.render">{{ x.render(scope.row) }}</span>
            <span v-else-if="x.routerName">
              <a
                :style="{
                  color: theme,
                  'text-decoration': 'underline',
                  cursor: 'pointer',
                }"
                @click="handleActive(scope.row, x.routerName, x.prop)"
              >
                <span v-if="!x.format" v-html="scope.row[x.prop]"></span>
                <span v-else>{{ x.format(scope.row[x.prop], scope.row) }}</span>
              </a>
            </span>
            <span v-else-if="x.component">
              <span v-if="scope.row['update']">
                <span
                  v-if="x.component.type == 'input' && x.component.inputChange"
                >
                  <el-input
                    v-model="scope.row[x.prop]"
                    :type="x.component.inputType || 'text'"
                    :disabled="scope.row[x.component.disabled]"
                    size="mini"
                    :rows="1"
                    @input="
                      operation(
                        x.component.methods,
                        scope.row,
                        scope.row[x.prop],
                        x.prop,
                        scope.$rowIndex,
                      )
                    "
                    @change="
                      operation(
                        x.component.inputChange,
                        scope.row,
                        scope.row[x.prop],
                        x.prop,
                        scope.$rowIndex,
                      )
                    "
                  ></el-input>
                </span>
                <span v-else-if="x.component.inputType == 'number'">
                  <el-input
                    v-model="scope.row[x.prop]"
                    @input="
                      operation(
                        x.component.methods,
                        scope.row,
                        scope.row[x.prop],
                        x.prop,
                        scope.$rowIndex,
                      )
                    "
                    :disabled="scope.row[x.component.disabled]"
                    @keyup.enter.native="
                      operation2(
                        x.component.methods2,
                        scope.row,
                        scope.row[x.prop],
                        x.prop,
                        scope.$rowIndex,
                      )
                    "
                    type="number"
                    size="mini"
                  ></el-input>
                </span>
                <span
                  v-else-if="
                    x.component.type == 'input' &&
                    x.component.inputType != 'number'
                  "
                >
                  <el-input
                    v-model="scope.row[x.prop]"
                    :type="x.component.inputType || 'text'"
                    :rows="1"
                    :disabled="scope.row[x.component.disabled]"
                    size="mini"
                    @blur="
                      operation(
                        x.component.methods,
                        scope.row,
                        scope.row[x.prop],
                        x.prop,
                        scope.$rowIndex,
                      )
                    "
                  ></el-input>
                </span>
                <span v-else-if="x.component.selectChange">
                  <el-select
                    filterable
                    clearable
                    :multiple="x.component.multiple"
                    :disabled="scope.row[x.component.disabled]"
                    value-key="label"
                    v-model="scope.row[x.prop]"
                    size="mini"
                    @change="
                      operation(
                        x.component.methods,
                        scope.row,
                        scope.row[x.prop],
                        x.prop,
                        scope.$rowIndex,
                      )
                    "
                  >
                    <el-option
                      v-for="x2 in scope.row[x.component.prop]"
                      :key="x2.value"
                      :label="x2.label"
                      :value="x2.value"
                    ></el-option>
                  </el-select>
                </span>
                <span v-else-if="x.component.type == 'select'">
                  <el-select
                    v-model="scope.row[x.prop]"
                    size="mini"
                    :multiple="x.component.multiple"
                    :disabled="scope.row[x.component.disabled]"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="x2 in scope.row[x.component.prop]"
                      :key="x2.value"
                      :label="x2.label"
                      :value="x2.value"
                    ></el-option>
                  </el-select>
                </span>
                <span v-else-if="x.component.type == 'date'">
                  <el-date-picker
                    size="mini"
                    :disabled="
                      scope.row[x.component.disabled] ||
                      scope.row[x.component[x.prop]]
                        ? true
                        : false
                    "
                    @change="
                      operation(
                        x.component.methods,
                        scope.row,
                        scope.row[x.prop],
                        x.prop,
                        scope.$rowIndex,
                      )
                    "
                    v-model="scope.row[x.prop]"
                    type="date"
                    editable
                    clearable
                    placeholder="选择日期"
                    :picker-options="getPickerTime(scope.row)"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                  ></el-date-picker>
                </span>
                <span v-else-if="x.component.type == 'datetime'">
                  <el-date-picker
                    size="mini"
                    @change="
                      operation(
                        x.component.methods,
                        scope.row,
                        scope.row[x.prop],
                        x.prop,
                        scope.$rowIndex,
                      )
                    "
                    v-model="scope.row[x.prop]"
                    type="datetime"
                    editable
                    clearable
                    :disabled="scope.row[x.component.disabled]"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    style="width: 100%"
                  ></el-date-picker>
                </span>
                <span v-else-if="x.component.type == 'time'">
                  <el-time-select
                    size="mini"
                    style="width: 100%"
                    :disabled="scope.row[x.component.disabled]"
                    v-model="scope.row[x.prop]"
                    :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '24:00',
                    }"
                    :placeholder="x.placeholder"
                  >
                  </el-time-select>
                </span>
                <span v-else-if="x.component.type == 'checkbox'">
                  <el-checkbox
                    v-model="scope.row[x.prop]"
                    @change="
                      operation(
                        x.component.methods,
                        scope.row,
                        scope.row[x.prop],
                        x.prop,
                        scope.$rowIndex,
                      )
                    "
                  ></el-checkbox>
                </span>
                <span v-else-if="x.component.type == 'switch'">
                  <el-switch
                    v-model="scope.row[x.prop]"
                    :active-color="x.component.activeColor"
                    :inactive-color="x.component.inactiveColor"
                    :active-value="x.component.activeValue"
                    :inactive-value="x.component.inactiveValue"
                  ></el-switch>
                </span>
                <span v-else-if="x.component.type == 'autocomplete'">
                  <el-autocomplete
                    size="mini"
                    :disabled="scope.row[x.component.disabled]"
                    v-model="scope.row[x.prop]"
                    :fetch-suggestions="
                      (queryString, cb) => {
                        fetchsuggertions(queryString, cb, x.component.methods);
                      }
                    "
                    @select="
                      (item) => getRemote(row, item, x.component.methods)
                    "
                  >
                    <template slot-scope="{ item }">
                      <div style="border-bottom: 1px dashed #8c8e8e">
                        <el-form label-width="100px" inline>
                          <el-form-item
                            style="margin-bottom: 5px"
                            :label="x.component.label"
                            ><span style="color: orange">{{
                              item[x.component.prop]
                            }}</span>
                          </el-form-item>
                          <el-form-item
                            style="margin-bottom: 5px"
                            :label="x.component.label2"
                            ><span style="color: orange">{{
                              item[x.component.prop2]
                            }}</span>
                          </el-form-item>
                        </el-form>
                      </div>
                    </template>
                  </el-autocomplete>
                </span>
                <span v-else-if="x.component.type == 'tag'">
                  <el-tag
                    class="table_tag"
                    @click.stop.native="x.component.handleClick(scope.row)"
                  >
                    {{ scope.row[x.prop] }}</el-tag
                  >
                </span>
                <span
                  class="flex"
                  v-else-if="x.component.type == 'ColorPicker'"
                >
                  <el-color-picker
                    size="mini"
                    v-model="scope.row[x.prop]"
                  ></el-color-picker>
                </span>
                <span v-else>{{ scope.row[x.prop] }}</span>
              </span>
              <span v-else-if="x.component.type == 'checkbox'">
                <el-tag
                  v-if="scope.row[x.prop] == true"
                  size="mini"
                  effect="light"
                  >是
                </el-tag>
                <el-tag v-else type="info" size="mini" effect="light"
                  >否
                </el-tag>
              </span>
              <span v-else-if="x.prop == 'Status'">
                <el-tag v-if="scope.row.Status == 1" size="mini" effect="light"
                  >启用
                </el-tag>
                <el-tag v-else type="danger" size="mini" effect="light"
                  >禁用
                </el-tag>
              </span>
              <span
                v-else
                v-html="scope.row[x.propName ? x.propName : x.prop]"
              ></span>
            </span>
            <span v-else-if="x.format">{{
              x.format(scope.row[x.prop], scope.row)
            }}</span>
            <span
              v-else
              v-html="scope.row[x.propName ? x.propName : x.prop]"
            ></span>
          </template>
        </vxe-column>
        <vxe-column
          v-if="isEditDel"
          label="操作"
          prop=""
          fixed="right"
          width="85px"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="editRow(scope.row, scope.$rowIndex)"
            ></el-button>
            <el-button
              v-show="condition ? condition(scope.row) : true"
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="delRow(scope.row, scope.$rowIndex)"
            ></el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="flex_shrink bgWhite" v-if="footerContent">
      <div v-if="showPagination" class="flex_row_spaceBtn pagination">
        <div v-show="sysID > 0">
          <span @click="toPageSetting" class="primaryColor cursor margin_r5"
            >SysID:{{ sysID }}
          </span>
          <el-popover
            placement="top"
            trigger="manual"
            v-model="PromptVisible"
            v-show="Prompt"
          >
            <div style="color: red; font-weight: bold" v-html="Prompt"></div>
            <el-button
              class="margin_r5"
              size="mini"
              slot="reference"
              type="info"
              icon="el-icon-info"
              circle
              @click="PromptVisible = !PromptVisible"
            ></el-button>
          </el-popover>
          <el-popover
            placement="top"
            trigger="manual"
            v-model="SettingVisible"
            v-show="isToolbar"
          >
            <div>
              <vxe-toolbar ref="xToolbar1" print custom> </vxe-toolbar>
            </div>
            <el-button
              size="mini"
              slot="reference"
              type="info"
              icon="el-icon-setting"
              circle
              @click="SettingVisible = !SettingVisible"
            ></el-button>
          </el-popover>
        </div>
        <div class="flex">
          <div class="footer_label" v-show="multipleSelection.length != 0">
            已选[<span style="color: red; font-weight: bold">{{
              multipleSelection.length
            }}</span
            >]
          </div>
          <div class="margin_right_20">
            {{ footerLabel }}
          </div>
          <el-pagination
            background
            @size-change="pageSize"
            :current-page="pagination.pageIndex"
            :page-sizes="[
              10, 20, 32, 50, 100, 150, 200, 250, 300, 350, 500, 400, 800, 1000,
              1500, 2000, 3000, 4000, 5000,
            ]"
            :page-size="pagination.pageSize"
            :total="pagination.pageTotal"
            @current-change="pageChange"
            layout="total, sizes, prev, pager, next,jumper"
          >
          </el-pagination>
        </div>
      </div>
      <div v-else class="flex_row_spaceBtn pagination">
        <div v-show="sysID > 0">
          <span @click="toPageSetting" class="primaryColor cursor margin_r5"
            >SysID:{{ sysID }}
          </span>
          <span style="color: red; font-weight: bold; margin-left: 10px">{{
            Prompt
          }}</span>
        </div>
        <div>
          <span>共{{ pagination.pageTotal }}条数据</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import XEUtils from 'xe-utils';
import { GetSearchData } from '@/api/Common';
export default {
  props: {
    // 是否显示底部合计
    showFooter: {
      type: Boolean,
      default: false,
    },
    dataFooter: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 是否显示底部内容
    footerContent: {
      type: Boolean,
      default: true,
    },
    // 是否开启列筛选
    EnableColumnFiltering: {
      type: Boolean,
      default: true,
    },
    // 合计包含哪些字段
    includeFields: {
      type: Array,
      default: function () {
        return [];
      },
    },
    IsIndex: {
      type: Boolean,
      default: false,
    },
    // 传行内列样式
    cellStyle: {
      type: Function,
      default: function ({ row, column }) {
        let style = {}; // 创建一个空的样式对象
        const key = column.property;
        if (
          Object.prototype.toString.call(row['FColors']) ===
            '[object Object]' &&
          key in row['FColors']
        ) {
          style.color = row['FColors'][key]; // 设置文本颜色
        }
        if (
          Object.prototype.toString.call(row['BColors']) ===
            '[object Object]' &&
          key in row['BColors']
        ) {
          style.backgroundColor = row['BColors'][key]; // 设置背景颜色
        }
        return style; // 返回样式对象
      },
    },
    // 行样式
    tableRowClassName: {
      type: Function,
      default: () => {
        return null;
      },
    },
    // 控制选框条件
    checCheckboxkMethod: {
      type: Function,
      default: () => {
        return true;
      },
    },
    // 固定合并列显示
    fixSpanMethods: {
      type: Boolean,
      default: false,
    },
    // 是否显示分页
    showPagination: {
      type: Boolean,
      default: true,
    },
    // 查询的时候需要过滤哪个表格的数据
    filtertb: {
      type: Number,
      default: -1,
      required: false,
    },
    //单击是否可编辑
    isEdit: {
      type: Boolean,
      default: false,
    },
    //是否合计
    summary: {
      type: Boolean,
      default: false,
    },
    // 是否多选
    isMultiple: {
      type: Boolean,
      default: true,
    },
    // 系统id
    sysID: {
      type: Number,
      default: 0,
    },
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    tableHeader: {
      type: Array,
      default: function () {
        return [];
      },
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },
    // 是否禁用选框
    forbidden: {
      type: Boolean,
      default: false,
    },
    unifypagination: {
      type: Boolean,
      default: false,
    },
    footerLabel: {
      type: String,
      default: '',
      required: false,
    },
    pagination: {
      type: Object,
      default() {
        return {
          pageIndex: 0,
          pageSize: 30,
          pageTotal: 0,
        };
      },
    },
    height: {
      type: String,
      required: false,
      default: '600px',
    },
    rowKey: {
      type: String,
      required: true,
    },
    treeConfig: {
      type: Object,
      default() {
        return null;
      },
    },
    // 选框禁用或显示操作
    // 是否显示选框
    forbidden: {
      type: Boolean,
      default: false,
    },
    // 是否单击需要勾选
    isToggleCheckbox: {
      type: Boolean,
      default: false,
    },
    // 是否要合并
    isSpanMethods: {
      type: Boolean,
      default: false,
    },
    // 是否有选框
    hasSelect: {
      type: Boolean,
      default: false,
    },
    // 是否清除选框
    isClear: {
      type: Boolean,
      default: false,
    },
    // 是否出现编辑跟删除
    isEditDel: {
      type: Boolean,
      default: false,
    },
    // 是否显示删除
    condition: {
      type: Function,
      default: function () {
        return true;
      },
    },
    // 表格的下标
    remark: {
      type: Number,
      required: false,
    },
    // 头部黄色，可编辑状态
    yellowHeader: {
      type: Boolean,
      default: false,
    },
    // 头部深蓝色，查看状态
    blueHeader: {
      type: Boolean,
      default: false,
    },
    // 默认当前用户显示表格的列
    defaultTableHeader: {
      type: Array,
      default: function () {
        return [];
      },
      required: false,
    },
    isToolbar: {
      type: Boolean,
      default: true,
    },
    //虚拟滚动
    scrollEnable: {
      type: Boolean,
      default: true,
    },
    // 懒加载
    keepSource: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      Prompt: '',
      PromptVisible: false,
      SettingVisible: false,
      multipleSelection: [],
      getPickerTime(row = {}) {
        return {
          disabledDate(time) {
            if (row.hasOwnProperty('PreStartDate') && row.PreStartDate) {
              return time.getTime() < new Date(row.PreStartDate).getTime();
            }
          },
        };
      },
      spanMethods: [],
      spanarr: [],
      spanarr2: [],
      variable: [], //存取变量名称
      prop: [], // 存取prop
      colspan: [],
      colspanDel: [],
      scrollTop: 0,
      theme: '#409EFF',
      isChangeColor: true,
      lastClickedRow: null,
    };
  },
  methods: {
    // 跳转至页面配置
    toPageSetting() {
      if (this.sysID == 35) {
        this.$emit('oneselftSysID', 35);
      } else {
        this.$router.push({
          name: 'PageAutoForm',
          // params: { ID: this.sysID },billID=220&IsPostBack=false
          query: { billID: this.sysID ,IsPostBack:false},
        });
      }
      // 解决其他页面弹框状态下跳转到配置表弹框不关闭的bug
      this.$emit('toPageSetting');
    },
    // 编辑行
    editRow(row, index) {
      this.$emit('editRow', row, index, this.remark);
    },
    // 删除行
    delRow(row, index) {
      this.$emit('delRow', row, index, this.remark);
    },
    // 表头颜色控制
    updateStyle(isLook, isEdit) {
      if (isLook) {
        return 'fontBlueInkColor';
      }
      if (isEdit) {
        return 'fontBluesInkColor';
      }
    },
    // 合并取几列
    header() {
      if (this.hasSelect) {
        // let index = 0;
        // for (var i = 0; i < this.tableHeader.length; i++) {
        //   if (this.tableHeader[i].isMerge) {
        //     this.spanMethods[index] = i;
        //     this.spanarr2.push([]);
        //     this.spanarr.push([]);
        //     this.prop[index] = this.tableHeader[i].prop;
        //     index++;
        //   }
        // }
        // let num2 = 0;
        // this.tableHeader.some((x, y) => {
        //   if (x.isMerge && y != this.tableHeader.length - 1) {
        //     this.colspanDel.push(y);
        //     num2++;
        //   } else if (x.isMerge && y == this.tableHeader.length - 1) {
        //     this.colspanDel.push(y);
        //     this.colspan.push({ start: y - num2, end: y });
        //     return;
        //   } else if (num2) {
        //     this.colspan.push({ start: y - num2, end: y - 1 });
        //     num2 = 0;
        //   }
        // });
      } else {
        let index = 0;
        for (var i = 1; i <= this.tableHeader.length; i++) {
          if (this.tableHeader[i - 1].isMerge) {
            this.spanMethods[index] = i;
            this.spanarr.push([]);
            this.spanarr2.push([]);
            this.prop[index] = this.tableHeader[i - 1].prop;
            index++;
          }
        }

        // 获取从第几列开始合并几项
        let num = 1;
        this.tableHeader.some((x, y) => {
          if (x.isMerge && y != this.tableHeader.length - 1) {
            this.colspanDel.push(y + 1);
            num++;
          } else if (x.isMerge && y == this.tableHeader.length - 1) {
            this.colspanDel.push(y + 1);
            this.colspan.push({ start: y - num + 2, end: y + 1 });
            return;
          } else if (num != 1) {
            this.colspan.push({ start: y - num + 2, end: y });
            num = 1;
          }
        });
      }
    },
    // 通用行合并函数（将相同多列数据合并为一行）
    rowspanMethod({ row, rowIndex, column, visibleData }) {
      let fields;
      if (this.tableHeader) {
        fields = this.tableHeader.map((item) => {
          if (item['isMerge']) {
            return item.prop;
          }
        });
      }
      let cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        let prevRow = visibleData[rowIndex - 1];
        let nextRow = visibleData[rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
    // 滚动
    scroll({ scrollTop, scrollLeft }) {
      this.scrollTop = scrollTop;
    },
    // 合并列数据
    info() {
      let a = JSON.stringify(this.spanarr2);
      let b = JSON.parse(a);
      this.spanarr = b;
      for (var j = 0; j < this.tableData.length; j++) {
        if (j === 0) {
          for (var i = 0; i < this.spanarr.length; i++) {
            this.spanarr[i].push(1);
            this.variable[i] = 0;
          }
        } else {
          // 判断当前元素与上一个元素是否相同(第1)
          let index = 0;
          for (var x = 0; x < this.prop.length; x++) {
            let prop = this.prop[x];
            if (this.tableData[j][prop] == this.tableData[j - 1][prop]) {
              //那个字段要合并就判断上一个和下一个的字段是否相同
              let sign = this.variable[index];
              this.spanarr[index][sign] += 1; //相同就累加
              this.spanarr[index].push(0);
              index++;
            } else {
              this.spanarr[index].push(1); //
              this.variable[index] = j;
              index++;
            }
          }
        }
      }
    },
    // 远程搜索
    fetchsuggertions(val, cb, methods) {
      if (methods) {
        this.$emit(methods, val, cb);
      }
    },
    // 获取远程搜索数据
    getRemote(row, item, methods) {
      if (methods) {
        this.$emit(methods, row, item);
      }
    },
    // row:本行数据 route：要跳转的路由路径 跳转要传的参数routeId
    handleActive(row, routerName, prop) {
      this.$emit('toPage', row, prop);
      // this.$router.push({
      //   name: routerName.name,
      //   query: { row: row },
      // });
    },
    // 表格触发事件
    operation(methods, row, val, prop, index) {
      // debugger
      // if (val) {
      //   let value = JSON.parse(JSON.stringify(val));
      //   this.$set(this.tableData[index], prop, value);
      //   this.$emit("sortChange", 0, 0, this.remark, -100, row, index);
      // }
      if (methods) {
        this.$emit(methods, row, val, prop, index, this.remark, this.filtertb);
      }
    },
    // 表格的回车事件
    operation2(methods, row, val, prop, index) {
      this.$emit(
        'keyupEnter',
        row,
        val,
        prop,
        index,
        this.remark,
        this.filtertb,
      );
    },
    // 选择一页显示多少数据
    pageSize(val) {
      this.$emit('pageSize', val, this.remark, this.filtertb);
    },
    // 分页导航
    pageChange(val) {
      this.$emit('pageChange', val, this.remark, this.filtertb);
    },
    //后端排序
    sortChange({ column }) {
      //调用父组件方法
      this.$refs.vxeTable.clearCheckboxRow();
      this.$emit(
        'sortChange',
        column.order,
        column.property,
        this.remark,
        this.filtertb,
      );
    },
    // 单击行
    handleRowClick({ row, column, rowIndex }) {
      // 如果是勾选框单元格，则取消行点击的触发
      if (column.type !== 'checkbox') {
        if (this.isToggleCheckbox) {
          this.$refs.vxeTable.toggleCheckboxRow(row);
          row = this.$refs.vxeTable.getCheckboxRecords(true);
          this.$emit('handleRowClick', row, this.remark, column);
          return;
        }
        // 如果是勾选框单元格，则取消行点击的触发
        // if (row !== this.lastClickedRow ) {
        this.$emit('handleRowClick', row, this.remark, column);
        //   this.lastClickedRow = row;
        // }
      }
    },
    // 双击行
    handleRowdbClick({ row, column }) {
      if (this.isEdit && !row.update) {
        this.$set(row, 'update', true);
      }
      this.$emit('handleRowdbClick', row, this.remark);
    },
    // 选择操作
    handleSelectionChange({ records, row }) {
      if (this.isMultiple) {
        this.multipleSelection = records;
        this.$emit('selectfun', this.multipleSelection, this.remark);
      } else {
        this.multipleSelection = [];
        if (records.length > 1) {
          this.$refs.vxeTable.clearCheckboxRow();
          this.$refs.vxeTable.setCheckboxRow(row, true);
        }
        this.multipleSelection.push(row);
        this.$emit('selectfun', this.multipleSelection, this.remark);
      }
    },
    //合并同一名称
    arraySpanMethod: function ({ row, column, rowIndex, columnIndex }) {
      if (this.isSpanMethods && this.spanMethods) {
        for (var i = 0; i < this.spanMethods.length; i++) {
          let num = this.spanMethods[i];
          if (columnIndex == this.spanMethods[i] && !column.parentId) {
            //第几列合并判断
            const _row = this.spanarr[i][rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
              colspan: _col,
            };
          }
        }
      } else if (this.fixSpanMethods) {
        if (row.Summary) {
          if (row.Summary) {
            if (
              this.colspan.findIndex((t) => {
                return t.start == columnIndex;
              }) != -1
            ) {
              let newIndex = this.colspan.findIndex((t) => {
                return t.start == columnIndex;
              });
              let end = 0;
              end =
                parseInt(this.colspan[newIndex].end) -
                parseInt(this.colspan[newIndex].start) +
                1;
              if (columnIndex) {
                return [1, end];
              }
            } else if (
              this.colspanDel.findIndex((o) => {
                return o == columnIndex;
              }) != -1
            ) {
              if (columnIndex) {
                return [0, 0];
              }
            }
          }
        }
      }
    },
    // 行样式控制
    // tableRowClassName({ row, rowIndex }) {
    // let className = "";
    // return className;
    // },
    //可编辑列加背景颜色
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      let className = '';
      return className;
    },
    // 禁用勾选
    selectInit({ row }) {
      if (this.forbidden) {
        if (row.ProcessGroupID) {
          return true; //可勾选
        } else {
          return false; //不可勾选
        }
      } else if (row.hasOwnProperty('IsSelectInit') == false) {
        return true; //可勾选
      } else if (
        row.hasOwnProperty('IsSelectInit') &&
        row.IsSelectInit == 'true'
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 筛选条件
    filterMethod({ option, row, column }) {
      if (option.data) {
        if (row[column.property]) {
          return JSON.stringify(row[column.property]).includes(option.data);
        }
      }
    },
    // 筛选列选框控制
    checkColumnCustomMethod({ column }) {
      return true;
    },
    //后端筛选
    filterChange(filters) {
      // 筛选值
      let val = filters.datas[0];
      // 筛选的字段
      let property = filters.property;
      // this.remark 操作的表格下标
      this.$emit('filterChange', val, property, this.remark);
      console.log('filters', filters);
      console.log('tableHeader', this.tableHeader);
    },
    // 显示隐藏列
    toolbarCustomEvent(params) {
      const visibleColumn = this.$refs.vxeTable.getColumns();
      switch (params.type) {
        case 'confirm': {
          //确认
          break;
        }
        case 'reset': {
          //还原
          break;
        }
        case 'close': {
          //关闭
          break;
        }
      }
    },
    filterRecoverMethod({ option }) {
      // 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值
      option.data = '';
    },

    // 底部合计栏
    footerMethod({ columns, data }) {
      let footerData = [];
      if (this.showFooter) {
        if (this.includeFields && this.includeFields.length > 0) {
          footerData = [
            columns.map((column, columnIndex) => {
              if (columnIndex === 0) {
                return '合计';
              }
              if (this.includeFields.includes(column.property)) {
                return XEUtils.sum(data, column.property);
              }
              return null;
            }),
          ];
        }
        if (this.dataFooter && this.dataFooter.length > 0) {
          function getValues(columns, data) {
            const result = [];
            columns.map((column) => {
              if (column.children) {
                const childValues = getValues(column.children, data);
                result.push(...childValues);
              } else if (column.prop in data) {
                result.push(data[column.prop]);
              }
            });

            return result;
          }
          footerData = [getValues(this.tableHeaderChange, this.dataFooter[0])];
          // footerData = footerData.concat([
          //   this.tableHeaderChange.map((column) => {
          //     const key = column.prop;
          //     let value = null;
          //     console.log(column, 'column');
          //     if (column.children && column.children.length > 0) {
          //       column.children.map((column) => {
          //         let value = null;
          //         const key = column.prop;
          //         this.dataFooter.forEach((footerItem) => {
          //           if (footerItem.hasOwnProperty(key)) {
          //             value = footerItem[key];
          //           }
          //         });
          //         return value;
          //       });
          //     } else {
          //       this.dataFooter.forEach((footerItem) => {
          //         if (footerItem.hasOwnProperty(key)) {
          //           value = footerItem[key];
          //         }
          //       });
          //       return value;
          //     }
          //   }),
          // ]);
        }
      }
      return footerData;
    },
    async getFooterRemark() {
      let form = {};
      form['dicID'] = 33;
      form['page'] = 1;
      form['rows'] = 0;
      form['DictionaryID'] = this.sysID;
      let res = await GetSearchData(form);
      const { result, data, count, msg } = res.data;
      if (result) {
        if (data.length && data[0].Remark1) {
          this.Prompt = data[0].Remark1;
        }
      }
    },
  },
  mounted() {
    if (this.$refs.vxeTable) {
      //这个if判断是怕拿不到table报错，也可以直接在table方法后加问号 '？'
      //list是要默认显示的列field数组
      if (this.defaultTableHeader.length != 0) {
        //res是拿到表格里的所有列field数组
        const res = this.$refs.vxeTable
          .getColumns()
          .map((item) => item.property);
        //显而易见，我在遍历查找，找到了就显示没找到就隐藏噢
        res.forEach((item) => {
          const column = this.$refs.vxeTable.getColumnByField(item);
          if (this.defaultTableHeader.findIndex((x) => x === item) !== -1) {
            column && this.$refs.vxeTable.showColumn(column);
          } else {
            column && this.$refs.vxeTable.hideColumn(column);
          }
        });
      }
    }
  },
  watch: {
    tableHeader: {
      handler(newValue, oldValue) {
        // debugger;
        if ((this.isSpanMethods || this.fixSpanMethods) && this.tableHeader) {
          this.header();
        }
        this.$set(this, 'tableHeader', newValue);
      },
      deep: true,
    },
    height: {
      handler(newValue, oldValue) {
        this.$set(this, 'height', newValue);
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true,
      deep: true,
    },
    tableData() {
      if (this.tableData) {
        // this.$refs.vxeTable.reloadData(this.tableData);//加载数据并清除所有状态,使用这个调用后端筛选、排序接口后条件被清空
        this.$refs.vxeTable.loadData(this.tableData); //加载数据
      }
      // if (this.tableData && this.isSpanMethods) {
      //   this.info();
      // }
    },
    isClear: {
      handler(newValue, oldValue) {
        if (newValue) {
          if (this.multipleSelection.length != 0) {
            this.$refs.vxeTable.clearCheckboxRow();
            this.$set(this, 'multipleSelection', []);
          }
        }
      },
      immediate: true,
      deep: true,
    },
    multipleSelection: {
      handler(newValue) {
        this.$emit('selectChanged', newValue, this.remark);
      },
      immediate: true,
      deep: true, // 启用深度监听
    },
  },
  computed: {
    tableHeaderChange() {
      let modifiedTableHeader = this.tableHeader.map((item) => {
        if (item['width'] == 0) {
          item['visible'] = false;
        }
        return {
          ...item,
        };
      });
      //如果hasSelect值存在的话
      if (this.hasSelect) {
        //删除带有选择的一列
        modifiedTableHeader = modifiedTableHeader.filter(
          (item) => item.prop !== 'isChecked',
        );
      }
      //重新渲染列
      this.$nextTick(() => {
        this.$refs.vxeTable.refreshColumn();
      });
      return modifiedTableHeader;
    },
  },
  activated() {
    // // 在 keep-alive 钩子函数中，显示之后手动调用
    // this.$nextTick(() => {
    //   this.$refs.vxeTable.recalculate();
    // });
  },
  created() {
    this.getFooterRemark();
    this.$nextTick(() => {
      if (this.isToolbar) {
        // 手动将表格和工具栏进行关联
        this.$refs.vxeTable.connect(this.$refs.xToolbar1);
      }
    });
  },
};
</script>
<style lang="scss" scoped>
.toolbar {
  position: absolute;
  /* width: 100px; */
  z-index: 99;
  height: 30px;
  left: 110px;
  top: 6px;
  background: rgba(0, 0, 0, 0);
}

::v-deep .vxe-button.type--button {
  height: 30px !important;
}

::v-deep .vxe-button.type--button.is--circle {
  min-width: 30px !important;
}

::v-deep .vxe-toolbar .vxe-custom--option-wrapper {
  bottom: 0;
  left: 50px;
  right: auto;
}
//表位行高
::v-deep .vxe-footer--row {
  height: 35px;
}
//表头底色
::v-deep .vxe-header--row {
  background-color: #f3f3f3;
}
//表头底部线
::v-deep .vxe-table--header-border-line {
  border-bottom: 1px solid #b9b9b9 !important;
}
//列表边框线宽度和颜色
::v-deep .vxe-table--render-default.border--full .vxe-body--column {
  background-image: linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc);
  // background-size: 2px 100%, 100% 2px;
}
//列表表头表尾线宽度和颜色
::v-deep .vxe-table--render-default.border--full .vxe-header--column,
.vxe-table--render-default.border--full .vxe-footer--column {
  background-image: linear-gradient(#b9b9b9, #b9b9b9),
    linear-gradient(#b9b9b9, #b9b9b9);
  // background-size: 2px 100%, 100% 2px;
}
//外边框线
// ::v-deep .vxe-table--render-default {
//   border: 1px solid #b9b9b9 !important;
// }
.el-select {
  width: 100%;
}
</style>
